<template>
    <div class="driverDetail">
        <div class="top">
            <div class="top_l">
                <div class="company">
                    <img src="~@/assets/images/联系人@3x.png" class="logo" />
                </div>
                <div class="userinfo">
                    <div>{{ detailParams.name }}</div>
                    <div>
                        {{ detailParams.idCardNumber }}
                    </div>
                </div>
            </div>

            <div class="top_r">
                <el-button type="primary" @click="update">编辑</el-button>
                <el-button @click="edit">删除</el-button>

            </div>
        </div>

        <div class="bottom">
            <el-tabs v-model="activeName" @tab-click="tabHandleClick">
                <el-tab-pane label="基本信息" name="0">
                    <div style="padding:30px">
                        <p style="font-size:20px">基本信息</p>
                        <el-row>
                            <el-col span="8" class="mb20">身份证号：{{ detailParams.idCardNumber }}</el-col>
                            <el-col span="8" class="mb20">驾驶证号：{{ detailParams.drivingLicenseNumber }}</el-col>
                            <el-col span="8" class="mb20">是否启用：                      
                                <el-tag v-if="detailParams.isEnabled" type="success">启用</el-tag>
                                <el-tag v-else type="danger">禁用</el-tag>
                            </el-col>
                            <el-col span="8" class="mb20">
                                <el-row type="flex" class="row-bg" justify="start">
                                    <el-col :span="4">
                                        <div>身份证照片：</div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">人像面</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width=100 :height=100 :src="detailParams.idCardPhotoFace"
                                                    :preview-src-list="[detailParams.idCardPhotoFace]" />
                                            </div>
                                        </div>

                                    </el-col>
                                    <el-col :span="6">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">国徽面</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width=100 :height=100 :src="detailParams.idCardPhotoBack"
                                                    :preview-src-list="[detailParams.idCardPhotoBack]" />
                                            </div>
                                        </div>

                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col span="8" class="mb20">
                                <el-row type="flex" class="row-bg" justify="start">
                                    <el-col :span="4">
                                        <div>驾驶证照片：</div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20 ">主页</div>
                                                <ImagePreview :width=100 :height=100
                                                    :src="detailParams.drivingLicensePhotoMain"
                                                    :preview-src-list="[detailParams.drivingLicensePhotoMain]" />

                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">副页</div>
                                                <ImagePreview :width=100 :height=100
                                                    :src="detailParams.drivingLicensePhotoSecondary"
                                                    :preview-src-list="[detailParams.drivingLicensePhotoSecondary]" />
                                            </div>
                                        </div>

                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <p style="font-size:20px">用户信息</p>
                        <el-row>
                            <el-col span="8" class="mb20">关联用户账号：{{ detailParams.linkedUserAccount }}</el-col>
                            <el-col span="8" class="mb20">账号状态：{{ detailParams.isCancel }}</el-col>
                            <el-col span="8" class="mb20">注册时间：{{ detailParams.registerTime }}
                            </el-col>
                        </el-row>
                        <p style="font-size:20px">系统信息</p>
                        <el-row>
                            <el-col span="6" class="mb20">操作人：{{ detailParams.updateBy }}</el-col>
                            <el-col span="6" class="mb20">操作时间：{{ detailParams.updateTime }}</el-col>
                            <el-col span="6" class="mb20">创建人：{{ detailParams.createBy }}</el-col>
                            <el-col span="6" class="mb20">创建时间：{{ detailParams.createTime }}</el-col>
                            <el-col span="6" class="mb20">创建来源：{{ detailParams.createTime }}</el-col>
                        
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="1">
                    <div style="
                    background-color: #fff;
        padding: 0 .3rem;
                    ">
                        <search-bar v-model="searchModel" :search-data="searchData" :config="searchData"
                            @search="handleSearchSubmit" @searchReset="handleSearchReset">
                        </search-bar>
                    </div>
                    <div class="record">
                        <LPTablePage :showIndex="false" :table-data="tableData" :table-column="tableColumn" align="left"
                            :total="total" :current-page="currentPage" @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange" :randomColumnKey="true" ref="tablePage">
                        </LPTablePage>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 编辑 -->
        <base-dialog :visible="addVisile" title="编辑司机" width="918px" class="addDictDialog"
            @handleDialogSubmit="handleAddSubmit" @handleDialogCancle="handleAddCancle">
            <el-form ref="dictForm" :model="dictModel" :rules="ruleRule" label-width="120px" class="dictForm"
                label-position="top" size="medium">
                <el-row :gutter="50">

                    <el-col :span="12">
                        <el-form-item label="姓名:" prop="name">
                            <el-input v-model.trim="dictModel.name" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model.trim="dictModel.phone" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="关联用户帐号:" prop="systemType">
                            <el-select style="width:100%" v-model="dictModel.linkedUserAccount" placeholder="关联用户帐号" filterable>
                                <el-option v-for="(item, index) in systemOptions" :key="index" :value="item.value"
                                    :label="item.label" />
                            </el-select>
                            <!-- <el-input  v-model="dictModel.system" readonly></el-input> -->

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号:" prop="idCardNumber">
                            <el-input v-model="dictModel.idCardNumber" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="驾驶证号:" prop="drivingLicenseNumber">
                            <el-input v-model="dictModel.drivingLicenseNumber" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                
                   
                </el-row>

                <el-row :gutter="50">
                        <el-col :span="12">
                        <el-form-item label="身份证照片:" prop="">
                            <div style="display:flex;">
                             <div class="tac">
                                <span>人像面</span>
                                <imageUpload v-model="dictModel.idCardPhotoFace" :isShowTip="false" />
                             </div>
                             <div class="ml20 tac">
                                <span>国徽面</span>
                                <imageUpload v-model="dictModel.idCardPhotoBack" :isShowTip="false" />
                             </div>

                            </div>
                            <div>
                                支持扩展名：.png .jpg .jpeg；单个文件大小不超过500MB
                            </div>
                            <!-- <el-input v-model="dictModel.remark" placeholder="请输入">
              </el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="驾驶证照片:" prop="remark">
                            <div style="display:flex;">
                             <div class="tac">
                                <span>主页</span>
                                <imageUpload v-model="dictModel.drivingLicensePhotoMain" :isShowTip="false" />
                             </div>
                             <div class="ml20 tac">
                                <span>副页</span>
                                <imageUpload v-model="dictModel.drivingLicensePhotoSecondary" :isShowTip="false" />
                             </div>

                            </div>
                            <div>
                                支持扩展名：.png .jpg .jpeg；单个文件大小不超过500MB
                            </div>
                            <!-- <el-input v-model="dictModel.remark" placeholder="请输入">
              </el-input> -->
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="50">
                        <el-col :span="12">
                        <el-form-item label="是否启用:" prop="isEnabled">

                            <el-switch v-model="dictModel.isEnabled" />
                            <span class="ml20">关闭后司机无法执行计划</span>

                        </el-form-item>
                    </el-col>
                    </el-row>
            </el-form>
        </base-dialog>
    </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage'
import SearchBar from '@/components/SearchBar'
import baseDialog from '@/components/BaseDialog'
import ImagePreview from '@/components/ImagePreview';
import beiGangApi from '@/api/logistics/beigang'
import { closeActiveTag } from '@/utils/lpUtils.js'

export default {
    name: 'driverDetail',
    components: {
        LPTablePage, SearchBar, baseDialog,
        ImagePreview
    },
    data() {
        return {
            addVisile:false,
            dictModel:{
                idCardPhotoFace:null,
                idCardPhotoBack:null,
                drivingLicensePhotoMain:null,
                drivingLicensePhotoSecondary:null,
             name:'',
             idCardNumber:'',
             drivingLicenseNumber:'',
             isEnabled:true,
            },
            activeName: '0',
            searchModel: {},
            tableData: [],
            detailParams: null,
            total: 0,
            currentPage: 1,
            searchData: [
                // { placeholder: "操作", prop: "ipaddr", },
                { placeholder: "操作事件", prop: "userName" },
                { placeholder: "操作人", prop: "aa" },
                {
                    label: "操作时间", prop: "loginTime", type: "daterangehms",
                    startPlaceholder: "起始时间",
                    endPlaceholder: "结束时间",

                },
                {
                    prop: 'search',
                    type: 'button',
                    // policy: ['system.log.query'],
                },
            ],
            tableColumn: [
                { label: "操作时间", prop: "infoId", },

                { label: "操作人", prop: "userName" },
                { label: "操作", prop: "ipaddr", },
                { label: "操作事件", prop: "status", },
            ],
            ruleRule: {
                name:[
                { required: true, trigger: "blur", message: "必填" }
                ],
                phone:[
                { required: true, trigger: "blur", message: "必填" }
                ],
                idCardNumber:[
                { required: true, trigger: "blur", message: "必填" }
                ],
                drivingLicenseNumber:[
                { required: true, trigger: "blur", message: "必填" }
                ],
                idCardPhotoFace:[
                { required: true, trigger: "blur", message: "必填" }
                ],
               
            },
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
      /*编辑处理*/
        handleAddSubmit() {
            // this.addVisile = false;
            this.$refs.dictForm.validate(valid => {
                if (valid) {
                    let obj = {...this.dictModel,
                            idCardPhotoFace:this.dictModel.idCardPhotoFace[0].url,
                            idCardPhotoBack:this.dictModel.idCardPhotoBack[0].url,
                            drivingLicensePhotoMain:this.dictModel.drivingLicensePhotoMain[0].url,
                            drivingLicensePhotoSecondary:this.dictModel.drivingLicensePhotoSecondary[0].url,
                        
                        }
                        obj.isEnabled = this.dictModel.isEnabled==true ? 1:0
                        beiGangApi.updateDriver(obj).then(res => {
                            if (!res.error) {
                             
                                this.dictModel = this.$options.data().dictModel

                                this.$message.success("编辑司机成功")
                                this.addVisile = false;
                                this.getDetail()
                            }
                        })
                } else {
                    this.$message.warning("请检查司机信息")
                    return false
                }
            })
        },
        handleAddCancle() {

            this.dictModel = this.$options.data().dictModel
            this.resetForm("dictForm")
            this.addVisile = false;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /*编辑处理*/
        getDetail() {
            let id = this.$route.params.id
            beiGangApi.getDriverDetail(id).then(res => {
                if (res.code == 200) {
          
                    this.detailParams = Object.assign(res.data, {
                     
                    })

                }
            })
        },
        update() {

            this.dictModel = {
                        ...this.detailParams,
                        idCardPhotoFace:[{
                            url:this.detailParams.idCardPhotoFace
                        }],
                        idCardPhotoBack:[{
                            url:this.detailParams.idCardPhotoBack
                        }],
                        drivingLicensePhotoMain:[{
                            url:this.detailParams.drivingLicensePhotoMain
                        }],
                        drivingLicensePhotoSecondary:[{
                            url:this.detailParams.drivingLicensePhotoSecondary
                        }],
             
                        isEnabled:this.detailParams.isEnabled==1?true:false
                    }
                 
                    this.addVisile = true
         },
        edit() {
            this.$confirm('确定删除吗', '删除', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                closeOnClickModal: false
            }).then(() => {
            
                beiGangApi.delDriver(this.detailParams.id).then(res => {
                    if (res.code==200) {
                        this.$message.success("操作成功")
                   
                        closeActiveTag(this, "/logistics/beiGang/driver");
                        
                    }
                })
            })
        },
        // 查询表格信息
        getTableList() {

        },
        tabHandleClick(tab, event) {
            // console.log('====================================');
            // console.log(tab, event);
            // console.log('====================================');
        },

        handleCurrentChange(v) {
            this.currentPage = v;
            this.getTableList()
        },
        handleSizeChange(v) {
            this.pageSize = v;
            this.currentPage = 1;
            this.getTableList()
        },
        handleSearchSubmit() {
            this.currentPage = 1;
            this.getTableList()
        },
        handleSearchReset() {
            this.currentPage = 1;
            this.$refs.tablePage.clearSelection()
            this.getTableList()
        },
    }
}
</script>

<style lang="scss" scoped>
.driverDetail {
    padding: 30px;

    .top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .top_l {
            display: flex;

            .userinfo {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }
    }
}

.company {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #0076ff;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 0.5rem;
    margin-right: 16px;

    .logo {
        width: 51px;
        height: 51px;
    }
}
</style>